/* eslint-disable */
import warning from 'warning'
import {Tree as VcTree, TreeNode} from '../vc-tree'
import animation from 'ant-design-vue/es/_util/openAnimation'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import {
    initDefaultProps,
    getOptionProps,
    filterEmpty,
    getComponentFromProp,
    getListeners
} from 'ant-design-vue/es/_util/props-util'
import {cloneElement} from 'ant-design-vue/es/_util/vnode'
import {ConfigConsumerProps} from 'ant-design-vue/es/config-provider/configConsumerProps'
import Icon from 'ant-design-vue/es/icon'
import './style';

function TreeProps() {
    return {
        showLine: PropTypes.bool,
        /** 是否支持多选 */
        multiple: PropTypes.bool,
        /** 是否自动展开父节点 */
        autoExpandParent: PropTypes.bool,
        /** checkable状态下节点选择完全受控（父子节点选中状态不再关联） */
        checkStrictly: PropTypes.bool,
        /** 是否支持选中 */
        checkable: PropTypes.bool,
        /** 是否禁用树 */
        disabled: PropTypes.bool,
        /** 默认展开所有树节点 */
        defaultExpandAll: PropTypes.bool,
        /** 默认展开对应树节点 */
        defaultExpandParent: PropTypes.bool,
        /** 默认展开指定的树节点 */
        defaultExpandedKeys: PropTypes.array,
        /** （受控）展开指定的树节点 */
        expandedKeys: PropTypes.array,
        /** （受控）选中复选框的树节点 */
        checkedKeys: PropTypes.oneOfType([
            PropTypes.array,
            PropTypes.shape({
                checked: PropTypes.array,
                halfChecked: PropTypes.array
            }).loose
        ]),
        /** 默认选中复选框的树节点 */
        defaultCheckedKeys: PropTypes.array,
        /** （受控）设置选中的树节点 */
        selectedKeys: PropTypes.array,
        /** 默认选中的树节点 */
        defaultSelectedKeys: PropTypes.array,
        selectable: PropTypes.bool,
        /** 展开/收起节点时触发 */
        // onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
        /** 点击复选框触发 */
        // onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
        /** 点击树节点触发 */
        // onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
        /** 单击树节点触发 */
        // onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
        /** 双击树节点触发 */
        // onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
        /** filter some AntTreeNodes as you need. it should return true */
        filterAntTreeNode: PropTypes.func,
        /** 异步加载数据 */
        loadData: PropTypes.func,
        loadedKeys: PropTypes.array,
        // onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
        /** 响应右键点击 */
        // onRightClick: (options: AntTreeNodeMouseEvent) => void,
        /** 设置节点可拖拽（IE>8） */
        draggable: PropTypes.bool,
        // /** 开始拖拽时调用 */
        // onDragStart: (options: AntTreeNodeMouseEvent) => void,
        // /** dragenter 触发时调用 */
        // onDragEnter: (options: AntTreeNodeMouseEvent) => void,
        // /** dragover 触发时调用 */
        // onDragOver: (options: AntTreeNodeMouseEvent) => void,
        // /** dragleave 触发时调用 */
        // onDragLeave: (options: AntTreeNodeMouseEvent) => void,
        // /** drop 触发时调用 */
        // onDrop: (options: AntTreeNodeMouseEvent) => void,
        showIcon: PropTypes.bool,
        icon: PropTypes.func,
        switcherIcon: PropTypes.any,
        prefixCls: PropTypes.string,
        filterTreeNode: PropTypes.func,
        openAnimation: PropTypes.any,
        treeNodes: PropTypes.array,
        treeData: PropTypes.array,
        /**
         * @default{title,key,children}
         * 替换treeNode中 title,key,children字段为treeData中对应的字段
         */
        replaceFields: PropTypes.object,
        blockNode: PropTypes.bool
    }
}

export {TreeProps}

export default {
    name: 'ATree',
    model: {
        prop: 'checkedKeys',
        event: 'check'
    },
    props: initDefaultProps(TreeProps(), {
        checkable: false,
        showIcon: false,
        openAnimation: {
            on: animation,
            props: {appear: null}
        },
        blockNode: false
    }),
    inject: {
        configProvider: {default: () => ConfigConsumerProps}
    },
    created() {
        warning(
            !('treeNodes' in getOptionProps(this)),
            '`treeNodes` is deprecated. please use treeData instead.'
        )
    },
    TreeNode,
    methods: {
        renderSwitcherIcon(prefixCls, switcherIcon, {isLeaf, expanded, loading}) {
            const {showLine} = this.$props
            if (loading) {
                return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`}/>
            }

            if (isLeaf) {
                return showLine ? <Icon type="file" class={`${prefixCls}-switcher-line-icon`}/> : null
            }
            const switcherCls = `${prefixCls}-switcher-icon`
            if (switcherIcon) {
                return cloneElement(switcherIcon, {
                    class: {
                        [switcherCls]: true
                    }
                })
            }
            return showLine ? (
                <Icon
                    type={expanded ? 'minus-square' : 'plus-square'}
                    class={`${prefixCls}-switcher-line-icon`}
                    theme="outlined"
                />
            ) : (
                <Icon type="caret-down" class={switcherCls} theme="filled"/>
            )
        },
        updateTreeData(treeData) {
            const {$slots, $scopedSlots} = this
            const defaultFields = {children: 'children', title: 'title', key: 'key'}
            const replaceFields = {...defaultFields, ...this.$props.replaceFields}
            return treeData.map(item => {
                const key = item[replaceFields.key]
                const children = item[replaceFields.children]
                const {on = {}, slots = {}, scopedSlots = {}, class: cls, style, ...restProps} = item
                const treeNodeProps = {
                    ...restProps,
                    icon: $scopedSlots[scopedSlots.icon] || $slots[slots.icon] || restProps.icon,
                    switcherIcon:
                        $scopedSlots[scopedSlots.switcherIcon] ||
                        $slots[slots.switcherIcon] ||
                        restProps.switcherIcon,
                    title:
                        $scopedSlots[scopedSlots.title] ||
                        $slots[slots.title] ||
                        restProps[replaceFields.title],
                    dataRef: item,
                    on,
                    key,
                    class: cls,
                    style
                }
                if (children) {
                    return {...treeNodeProps, children: this.updateTreeData(children)}
                }
                return treeNodeProps
            })
        },
        getCheckedKeys() {
            return this.$refs.tree.getCheckedKeys()
        },
        clearExpandedKeys() {
            return this.$refs.tree.clearExpandedKeys()
        },
        getHalfCheckedKeys() {
            return this.$refs.tree.getHalfCheckedKeys()
        }
    },
    render() {
        const props = getOptionProps(this)
        const {$slots, $scopedSlots} = this
        const {prefixCls: customizePrefixCls, showIcon, treeNodes, blockNode} = props
        const getPrefixCls = this.configProvider.getPrefixCls
        const prefixCls = getPrefixCls('tree', customizePrefixCls)
        const switcherIcon = getComponentFromProp(this, 'switcherIcon')
        const checkable = props.checkable
        let treeData = props.treeData || treeNodes
        if (treeData) {
            treeData = this.updateTreeData(treeData)
        }
        const vcTreeProps = {
            props: {
                ...props,
                prefixCls,
                checkable: checkable ? <span class={`${prefixCls}-checkbox-inner`}/> : checkable,
                children: filterEmpty($scopedSlots.default ? $scopedSlots.default() : $slots.default),
                __propsSymbol__: Symbol(),
                switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps)
            },
            on: getListeners(this),
            ref: 'tree',
            class: {
                [`${prefixCls}-icon-hide`]: !showIcon,
                [`${prefixCls}-block-node`]: blockNode
            }
        }
        if (treeData) {
            vcTreeProps.props.treeData = treeData
        }
        return <VcTree {...vcTreeProps} />
    }
}
